<template>
  <div>
    <div class="follow_box">
      <div class="recommend_follow" v-show="dataLists.length > 0">
        <p class="head">推荐关注</p>
        <div class="swiper-container">
          <div class="swiper-wrapper recommend">
            <div
              class="swiper-slide recommend_user_box"
              v-for="(item, index) in dataLists"
              :key="index"
            >
              <span
                class="iconfont icon-cancel-1-copy"
                @click="clear(index)"
              ></span>
              <div class="user_img">
                <img :src="item.user_url" />
              </div>
              <div class="user_name">
                <div class="name">{{ item.user_name }}</div>
                <p class="user_record">{{ item.user_profile }}</p>
              </div>
              <div
                :class="['follow_btn', { ok: item.user_foollow }]"
                @click="follw(index)"
              >
                {{ item.user_foollow ? "✔已关注" : "+关注" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="popularusers"
        v-for="(item, index) in popularusersLists"
        :key="index"
      >
        <div class="popularusers_head">
          <p>{{ item.user_personal }}</p>
          <span
            class="iconfont icon-cancel-1-copy"
            @click="clearUser(index)"
          ></span>
        </div>
        <div class="popularusers_user">
          <div class="user_box">
            <div class="user_img">
              <img :src="item.user_url" />
            </div>
            <div class="user_test">
              <p class="name">{{ item.user_name }}</p>
              <p class="user_address">
                {{ item.user_time }}&nbsp;&nbsp;·&nbsp;&nbsp;{{
                  item.user_position
                }}
              </p>
            </div>
          </div>
          <div
            class="fullow_user"
            @click="followUser(index)"
            v-if="!item.user_foollow"
          >
            +关注
          </div>
        </div>
        <div class="user_img">
          <div v-for="(items, i) in item.user_img" :key="i" :class="['img',{'img_con':item.user_img.length == 1}]">
            <img :src="items" />
          </div>
        </div>
        <div class="user_view">
          <p class="title">{{ item.user_title }}</p>
          <p :class="['title_content',{'con':item.test_flag}]">
            {{ item.user_test }}
          </p>
          <span @click="open(index)" v-show="!item.test_flag">展开</span>
        </div>
        <div class="operation">
          <div class="share">
            <div class="share_box">
              <span class="iconfont icon-fenxiang"></span>
              <span class="text">分享</span>
            </div>
          </div>
          <div class="more">
            <div class="more_box">
              <span class="iconfont icon-dianzan"></span>
              <span class="text">{{ item.user_fabulous }}</span>
            </div>
            <div class="more_box">
              <span class="iconfont icon-pinglun"></span>
              <span class="text">{{ item.user_comment }}</span>
            </div>
            <div class="more_box">
              <span class="iconfont icon-shoucang"></span>
              <span class="text">{{ item.user_collection }}</span>
            </div>
          </div>
        </div>
        <div class="user_comment">
          <div
            class="user_comment_box"
            v-for="(item, index) in testLists"
            :key="index"
          >
            <div class="user_name_text_box">
              <p class="user_name">{{ item.user_name }}</p>
              <p class="user_test">{{ item.user_test }}</p>
            </div>
            <div class="fabulous">
              <span class="iconfont icon-dianzan"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  data: function () {
    return {
      dataLists: [],
      popularusersLists: [],
      relevantLists: [
        {
          id: 1,
          user_test: [
            {
              user_name: "张三",
              user_test: "真不错",
            },
          ],
        },
      ],
      testLists: [
        {
          user_name: "张三",
          user_test: "真不错",
        },
      ],
    };
  },
  methods: {
    // 删除推荐用户
    clear(index) {
      this.dataLists.splice(index, 1);
    },
    //关注推荐用户
    follw(index) {
      let data = this.dataLists[index];
      data.user_foollow = !data.user_foollow;
      if (data.user_foollow) {
        this.$toast("关注成功");
      } else {
        this.$toast("取消关注");
      }
    },
    // 删除用户说说
    clearUser(index) {
      this.popularusersLists.splice(index, 1);
    },
    // 关注说说用户
    followUser(index) {
      let data = this.popularusersLists;
      data[index].user_foollow = true;
      this.$toast("关注成功");
    },
    //展开内容
    open(index){
      this.popularusersLists[index].test_flag=!this.popularusersLists[index].test_flag;
    }
  },
  created() {
    this.$http.get("/static/recommendfollow.json").then((res) => {
      this.dataLists = res.data;
    });
    this.$http.get("/static/userfollow.json").then((res) => {
      this.popularusersLists = res.data;
    });
  },
  mounted() {
    new Swiper(".swiper-container", {
      slidesPerView: 3, //显示个数
      paginationClickable: true,
      observer: true,
      observeParents: true,
      spaceBetween: 5, //div之间间距
      // freeMode: true,
    });
  },
};
</script>

<style lang="less">
.follow_box {
  .recommend_follow {
    background-color: #fff;
    padding-bottom: 20px;
    .head {
      font-size: 12px;
      color: #c1c0c4;
      padding-left: 20px;
      padding-bottom: 10px;
    }
    .recommend {
      .recommend_user_box {
        padding: 6px 10px 12px 10px;
        border: 2px solid #f6f6f6;
        height: 183px;
        width: 134px;
        text-align: center;
        font-size: 12px;
        color: #d6d6de;
        span {
          display: inline-block;
          width: 100%;
          text-align: right;
        }
        .user_img {
          display: inline-block;
          width: 100%;
          img {
            width: 65px;
            height: 65px;
            border-radius: 50%;
          }
        }
        .user_name {
          .name {
            padding-top: 12px;
            color: #000;
          }
          .user_record {
            margin: 0 auto;
            width: 70%;
            padding: 8px 0;
            min-height: 32px;
          }
        }
        .follow_btn {
          width: 80%;
          height: 23px;
          color: #fff;
          background-color: #00c2c2;
          line-height: 23px;
          margin: 0 auto;
        }
        .ok {
          background-color: #999;
        }
      }
    }
  }
  .popularusers {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    padding-bottom: 15px;
    .popularusers_head {
      height: 26px;
      border-bottom: 2px solid #fafafa;
      padding: 0 16px;
      font-size: 12px;
      line-height: 26px;
      color: #98989d;
      display: flex;
      justify-content: space-between;
    }
    .popularusers_user {
      box-sizing: border-box;
      width: 100%;
      padding: 13px 15px 7px;
      display: flex;
      justify-content: space-between;
      .user_box {
        display: flex;
        .user_img {
          width: 32px;
          height: 32px;
          img {
            width: 32px;
            height: 32px;
            border-radius: 50%;
          }
        }
        .user_test {
          padding-left: 8px;
          font-size: 12px;
          .name {
            font-weight: bold;
          }
          .user_address {
            transform: scale(0.8) translateX(-12px);
            color: #878591;
          }
        }
      }
      .fullow_user {
        display: inline-block;
        font-size: 12px;
        color: #04b1b3;
        padding: 4px 8px;
        height: 19px;
        background-color: #f3f6f7;
      }
    }
    .user_img {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box; 
      padding: 0 5px;
      .img {
        width: 32%;
        height: 120px;
        display: flex;
        justify-content: center;
        align-content: center;
        border-radius: 10px;
        overflow: hidden;
        margin-left:3px ;
        margin-bottom: 3px;
        img{
         object-fit: cover;
         width: 100%;
         height: 100%;
        }
      }
      .img_con {
        width: 100%;
        height: auto;
        padding: 0 20px;
      }
    }
    .user_view {
      padding: 10px 16px;
      font-size: 14px;
      .title {
        font-weight: bold;
      }
      .title_content {
        display: inline-block;
        font-size: 12px;
        color: #000;
        width: 36.8%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      //展开类名
      .con {
        display: block;
        width: 87%;
        padding: 0;
        white-space: revert;
      }
      span {
        display: inline-block;
        font-size: 12px;
        vertical-align: top;
        color: #399696;
      }
    }
    .operation {
      padding: 12px 18px 10px;
      display: flex;
      justify-content: space-between;
      align-content: center;
      .share {
        .share_box {
          span {
            display: block;
            text-align: center;
          }
          .text {
            font-size: 12px;
            color: #98989d;
          }
        }
      }
      .more {
        width: 28.8%;
        display: flex;
        justify-content: space-between;
        .more_box {
          span {
            display: block;
            text-align: center;
          }
          .text {
            font-size: 12px;
            transform: scale(0.8);
            padding-top: 2px;
            color: #98989d;
          }
        }
      }
    }
    .user_comment {
      padding: 0px 15px;
      .user_comment_box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        background-color: #f9f9fb;
        padding: 5px 10px;
        font-size: 12px;
        .user_name_text_box {
          p {
            display: inline;
          }
          .user_name {
            font-weight: bold;
          }
          .user_test {
            color: #cdcdd3;
            width: 60%;
            padding-left: 5px;
          }
        }
      }
    }
  }
}
</style>